<template>
  <div id="waiting-route-item">
    <div class="upper">
      <div class="driver-info">
        <img class="driver-head" :src="info.driverImage==''?defaultDriverImage:info.driverImage" />
        <div class="name-info">
          <div class="driver-name">{{info.driverName?info.driverName==''?'待指派':info.driverName:'待指派'}}</div>
          <div class="car-info">{{carInfo}}</div>
        </div>
      </div>
      <div class="price-info">
        <div class="price">
          <span style="color:#FF6917">￥{{info.orderAmt}}</span>起
        </div>
        <div class="seat">
          剩余
          <span style="color:#FF6917">{{info.seatFree}}</span>座
        </div>
      </div>
    </div>
    <div v-show="pushType==1">
      <ul class="orderinformation_list">
        <li>
          <md-icon name="shangchedian" slot="left" class="shangchedian"></md-icon>
          <span>{{getorigin}} {{getstartRoute}}</span>
        </li>
        <li>
          <md-icon name="xiachedian" slot="left" class="shangchedian"></md-icon>
          <span>{{getdestination}} {{getendRoute}}</span>
        </li>
      </ul>
    </div>
    <div class="lower">
      <div class="time-info">
        <div class="driver-time">
          <md-icon class="icon" name="time"></md-icon>
          <div class="mx-2" style="color:#999999">接驾时间</div>
          <div>{{info.driverTime}}</div>
        </div>
        <div class="travel-time">
          <md-icon class="icon" name="time"></md-icon>
          <div class="mx-2" style="color:#999999">出发时间</div>
          <div>{{info.travelTime}}</div>
        </div>
      </div>
      <div class="join-allot-btn" type="ghost" @click="joinAllot">加入行程</div>
    </div>
  </div>
</template>

<script>
import '@/assets/svgs/time.svg';
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import { Icon, Button, Toast } from 'mand-mobile';
import { GET_ALLOT_INFO } from '@/store/actions.types';
import { SET_PIN_SELECTED_REMARKS, SET_PIN_COST_INFO, SET_PIN_PASSENGER_NUMBER } from '@/store/mutations.types';
import { mapGetters } from 'vuex';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'waiting-route-item',
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button
  },
  data() {
    return {
      defaultDriverImage: require('@/assets/imgs/dcfxc_tx_def.png'),
      pushType: '0' // 加入行程是否显示地址 0 不显示 1显示
    };
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  created() {
    console.log(this.info);
    if (this.info.pushType === '1') {
      this.pushType = '1';
    }
  },
  methods: {
    joinAllot() {
      this.$store
        .dispatch(GET_ALLOT_INFO, this.info.allotId)
        .then(() => {
          this.$store.commit(SET_PIN_SELECTED_REMARKS, []);
          this.$store.commit(SET_PIN_COST_INFO, null);
          this.$store.commit(SET_PIN_PASSENGER_NUMBER, 0);
          this.$router.push({
            name: 'JoinAllot',
            query: {
              allotid: this.info.allotId
            }
          });
        })
        .catch(reason => {
          Toast.failed(reason.message);
        });
    }
  },
  computed: {
    ...mapGetters(['getAllotInfo']),
    carInfo() {
      let str = '未知车型';
      if (this.info.licensePlate) {
        if (this.info.licensePlate !== '') {
          str = this.info.licensePlate;
        }
      }
      return str;
    },
    getorigin() {
      var str = this.info.startRoute;
      if (!str) {
        return '';
      }
      if (str.length > 3) {
        return str.substring(0, 3) + '...';
      } else {
        return str;
      }
    },
    getstartRoute() {
      var str = this.info.startName;
      if (!str) {
        return '';
      }
      if (str.length > 20) {
        return str.substring(0, 20) + '...';
      } else {
        return str;
      }
    },
    getdestination() {
      var str = this.info.endRoute;
      if (!str) {
        return '';
      }
      if (str.length > 3) {
        return str.substring(0, 3) + '...';
      } else {
        return str;
      }
    },
    getendRoute() {
      var str = this.info.endName;
      if (!str) {
        return '';
      }
      if (str.length > 20) {
        return str.substring(0, 20) + '...';
      } else {
        return str;
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
row() {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

column() {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.shangchedian {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  position: relative;
  bottom: 3px;
}

.orderinformation_list {
  padding-top: 20px;
  position: relative;
}

.orderinformation_list li {
  font-size: 24px;
  color: #666;
  margin-top: 10px;
}

.orderinformation_list li span {
  margin-left: 10px;
}

.orderinformation_list li em {
  font-size: 20px;
  color: #999;
  border: solid 1px #E0E0E0;
  padding: 4px 10px;
  margin-left: 20px;
  font-style: normal;
  border-radius: 7px;
  position: relative;
  bottom: 3px;
}

#waiting-route-item {
  background-color: #fff;
  padding: 20px 0px;
  border-bottom: 1px solid #E0E0E0;

  .upper {
    row();

    .driver-info {
      row();

      .driver-head {
        width: 80px;
        height: 80px;
      }

      .name-info {
        margin-left: 20px;

        .driver-name {
          font-size: 28px;
        }

        .car-info {
          font-size: 24px;
          color: color-text-minor;
        }
      }
    }

    .price-info {
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: right;

      .price {
        text-align: end;
        color: color-text-minor;
        font-size: 26px;
      }

      .seat {
        margin-top: 8px;
        text-align: end;
        color: color-text-minor;
        font-size: 24px;
      }
    }
  }

  .lower {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 22px;

    .time-info {
      column();
      font-size: 24px;

      .driver-time {
        row();
      }

      .travel-time {
        margin-top: 10px;
        row();
      }

      .icon {
        width: 16px;
        height: 16px;
      }
    }

    .mx-2 {
      margin: 0px 22px;
    }

    .join-allot-btn {
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 24px;
      border: 1px solid #ccc;
      color: #999;
      text-align: center;
      vertical-align: middle;
    }
  }
}
</style>
